<template>
	<div class="home">
		<div class="left">
			<div class="edit">
				<el-form size="mini" :inline="true" class="demo-form-inline">
					<el-form-item label="左上角时间">
						<el-input v-model="baseInfo.time" placeholder="左上角时间"></el-input>
					</el-form-item>
					<el-form-item label="头像">
						<el-upload :on-change="handleChange" :auto-upload="false" class="upload-demo" drag action="#">
							<i class="el-icon-upload"></i>
							<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
						</el-upload> </el-form-item>
					<el-form-item label="收款方名称">
						<el-input v-model="baseInfo.company" placeholder="收款方名称"></el-input>
					</el-form-item>
					<el-form-item label="金额">
						<el-input v-model="baseInfo.amount" placeholder="金额"></el-input>
					</el-form-item>
					<el-form-item label="信号格数">
						<el-select v-model="baseInfo.signal" placeholder="请选择信号格数">
							<el-option v-for="item in signalOptions" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="网络">
						<el-select v-model="baseInfo.network" placeholder="请选择网络">
							<el-option v-for="item in networkOptions" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="电量">
						<el-input-number v-model="baseInfo.eNum" placeholder="电量"></el-input-number>
					</el-form-item>
					<el-form-item label="是否充电状态">
						<el-radio v-model="baseInfo.flashFlag" :label="0" border>充电</el-radio>
						<el-radio v-model="baseInfo.flashFlag" :label="1" border>不充电</el-radio>
					</el-form-item>
				</el-form>
				<el-form size="mini" :inline="true" class="demo-form-inline">
					<div v-for="(item, index) in payInfoList">
						<el-form-item label="左边的值">
							<el-input v-model="item.label" placeholder="左边的值"></el-input>
						</el-form-item>
						<el-form-item label="右边的值">
							<el-input v-model="item.text" placeholder="右边的值"></el-input>
						</el-form-item>
						<el-button type="primary" @click="handleAdd(index)" icon="el-icon-plus" circle></el-button>
						<el-button v-if="0 !== index" type="danger" @click="handleDelete(index)" icon="el-icon-delete"
							circle></el-button>
					</div>
				</el-form>
				<el-button style="width: 80%; margin-top: 20px; border-radius: 8px" icon="el-icon-picture" size="mini" @click="handleSaveImage"
					type="primary">点击保存图片</el-button>
			</div>
		</div>
		<div class="right">
			<div ref="imgBox" class="pay">
				<div class="top-info">
					<div class="left-time">{{ baseInfo.time }}</div>
					<div class="right-network">
						<div class="grid">
							<div ref="grid-1" class="grid-1"></div>
							<div ref="grid-2" class="grid-2"></div>
							<div ref="grid-3" class="grid-3"></div>
							<div ref="grid-4" class="grid-4"></div>
						</div>
						<div class="g-num">
							{{ baseInfo.network }}
						</div>
						<div ref="e-num" class="e-num">
							<div ref="num-wrap" class="num-wrap">
								<div ref="num" class="num">{{ baseInfo.eNum }}</div>
							</div>
							<div v-show="baseInfo.flashFlag === 0" class="flash">
								<img src="../assets/img/flash.png" />
							</div>
						</div>
						<div class="e-num-point">
						</div>
					</div>
				</div>
				<div class="title-info">
					<div class="avatar">
						<img :src="baseInfo.avatar" />
					</div>
					<div class="company">
						{{ baseInfo.company }}
					</div>
					<div class="amount">
						{{ baseInfo.amount }}
					</div>
				</div>
				<div class="pay-devide"></div>
				<div class="pay-info">
					<div v-for="(item, index) in payInfoList" :key="index" class="row-info">
						<div class="row-label">{{ item.label }}</div>
						<div class="row-text">{{ item.text }}</div>
					</div>
				</div>
				<div class="bottom-gray"></div>
				<div class="bottom-info">
					<div class="bottom-title">账单服务</div>
					<div class="bottom-devide"></div>
					<div class="bottom-recommend">
						<div v-for="(item, index) in accountInfoList" :key="index" class="recommend-item">
							<div class="recommend-icon">
								<img :src="item.icon" />
							</div>
							<div class="recommend-text">{{ item.text }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import html2canvas from 'html2canvas';

	export default {
		data() {
			return {
				signalOptions: [{
						value: 4,
						label: '4'
					}, {
						value: 3,
						label: '3'
					}, {
						value: 2,
						label: '2'
					},
					{
						value: 1,
						label: '1'
					}
				],
				networkOptions: [{
					value: '5G',
					label: '5G'
				}, {
					value: '4G',
					label: '4G'
				}, {
					value: '3G',
					label: '3G'
				}, {
					value: '2G',
					label: '2G'
				}],
				baseInfo: {
					time: "10.45",
					avatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
					company: "深圳市深圳通有限公司",
					amount: "-6.80",
					eNum: "92",
					network: "5G",
					signal: "2",
					flashFlag: 0,
				},
				payInfoList: [{
						"label": "当前状态",
						"text": "支付成功",
					},
					{
						"label": "支付时间",
						"text": "2024年7月29日 08:56:23",
					},
					{
						"label": "商品",
						"text": "费用",
					},
					{
						"label": "商户全称",
						"text": "深圳市深圳通有限公司",
					},
					{
						"label": "收购机构",
						"text": "财富通支付科技有限公司",
					},
					{
						"label": "支付方式",
						"text": "招商银行储蓄卡(2121)",
					},
					{
						"label": "交易单号",
						"text": "1217736466553674895984663636372",
					},
					{
						"label": "商户单号",
						"text": "18949746645524366474885756773",
					}
				],
				accountInfoList: [{
						icon: require('@/assets/img/问号.png'),
						text: "对订单有疑惑"
					},
					{
						icon: require('@/assets/img/发起.png'),
						text: "发起群收款"
					},
					{
						icon: require('@/assets/img/商户.png'),
						text: "在此商户的交易"
					}
				]
			}
		},
		watch: {
			'baseInfo.signal': {
				handler(newVal, oldVal) {
					if (newVal === 1) {
						this.$refs['grid-1'].style.backgroundColor = 'black'
						this.$refs['grid-4'].style.backgroundColor = 'rgb(204, 204, 205)'
						this.$refs['grid-3'].style.backgroundColor = 'rgb(204, 204, 205)'
						this.$refs['grid-2'].style.backgroundColor = 'rgb(204, 204, 205)'
					}
					if (newVal === 2) {
						this.$refs['grid-2'].style.backgroundColor = 'black'
						this.$refs['grid-1'].style.backgroundColor = 'black'
						this.$refs['grid-4'].style.backgroundColor = 'rgb(204, 204, 205)'
						this.$refs['grid-3'].style.backgroundColor = 'rgb(204, 204, 205)'
					}
					if (newVal === 3) {
						this.$refs['grid-3'].style.backgroundColor = 'black'
						this.$refs['grid-2'].style.backgroundColor = 'black'
						this.$refs['grid-1'].style.backgroundColor = 'black'
						this.$refs['grid-4'].style.backgroundColor = 'rgb(204, 204, 205)'
					}
					if (newVal === 4) {
						this.$refs['grid-4'].style.backgroundColor = 'black'
						this.$refs['grid-3'].style.backgroundColor = 'black'
						this.$refs['grid-2'].style.backgroundColor = 'black'
						this.$refs['grid-1'].style.backgroundColor = 'black'
					}
				},
				deep: true
			},
			'baseInfo.flashFlag': {
				handler(newVal, oldVal) {
					if (newVal === 0) {
						this.$refs['num-wrap'].style.backgroundColor = 'rgb(54, 200, 94)'
						this.$refs['num'].style.color = 'white'
					} else {
						this.$refs['num-wrap'].style.backgroundColor = '#d9d5d5'
						this.$refs['num'].style.color = 'white'
					}
				},
				deep: true
			},
			'baseInfo.eNum': {
				handler(newVal, oldVal) {
					if (newVal) {
						this.$refs['num-wrap'].style.width = (Number(newVal) - 30) + '%'
						this.$refs['e-num'].style.backgroundColor = 'gray'
					}
				},
				deep: true
			}
		},
		methods: {
			getBase64(file) {
				return new Promise((resolve, reject) => {
					const reader = new FileReader();
					reader.onload = e => resolve(e.target.result);
					reader.onerror = e => reject(e);
					reader.readAsDataURL(file);
				});
			},
			handleSaveImage() {
				html2canvas(this.$refs.imgBox, {
					height: this.$refs.imgBox.scrollHeight,
					width: this.$refs.imgBox.clientWidth,
				}).then((canvas) => {
					const link = document.createElement("a"); // 创建一个超链接对象实例
					link.download = new Date().getTime() + ".png"; // 设置要下载的图片的名称
					link.href = canvas.toDataURL(); // 将图片的URL设置到超链接的href中
					link.click(); // 触发超链接的点击事件
				});
			},
			handleChange(file, fileList) {
				this.getBase64(file.raw).then(base64 => {
					this.baseInfo.avatar = base64;
				});
			},
			handleAdd(index) {
				this.payInfoList.splice(index, 0, {
					label: "",
					text: ""
				})
			},
			handleDelete(index) {
				this.payInfoList.splice(index, 1)
			}
		}
	}
</script>

<style lang="less">
	.home {
		padding-left: 30px;
		padding-top: 20px;
		display: flex;
		width: 100%;
		height: calc(100vh);

		.left {
			display: flex;
			flex-direction: column;
			width: 660px;
			height: 100%;
		}

		.right {
			margin-left: 20px;
			padding-top: 40px;
			width: 360px;
			height: 800px;
		}

		.pay {
			width: 360px;
			height: 700px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.top-info {
				width: 100%;
				height: 30px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left-time {
					display: flex;
					align-items: center;
					width: 80px;
					height: 100%;
					color: black;
					font-weight: bold;
				}

				.right-network {
					width: calc(100vh - 80px);
					height: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.grid {
						width: 30px;
						height: 16px;
						display: flex;
						transform: rotateX(180deg);

						.grid-1 {
							width: 4px;
							height: 6px;
							background: rgb(2, 2, 3);
							border-radius: 8px;
						}

						.grid-2 {
							width: 4px;
							height: 10px;
							background: rgb(2, 2, 3);
							border-radius: 8px;
							margin-left: 4px;
						}

						.grid-3 {
							width: 4px;
							height: 14px;
							background: rgb(204, 204, 205);
							border-radius: 8px;
							margin-left: 4px;
						}

						.grid-4 {
							width: 4px;
							height: 16px;
							background: rgb(204, 204, 205);
							border-radius: 8px;
							margin-left: 4px;
						}
					}

					.g-num {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 36px;
						height: 100%;
						font-size: 17px;
						font-weight: bold;
						font-family: "JinDong", "Microsoft YaHei", sans-serif;
					}

					.e-num {
						display: flex;
						align-items: center;
						width: 36px;
						height: 18px;
						font-size: 10px;
						font-weight: bold;
						font-family: "JinDong", "Microsoft YaHei", sans-serif;
						border-radius: 6px;
						background-color: #d9d5d5;

						.num-wrap {
							border-radius: 6px 0px 0px 6px;
							height: 100%;
							background-color: rgb(54, 200, 94);
							min-width: 20.51px;
						}

						.num {
							padding-left: 4px;
							width: 17px;
							height: 100%;
							color: white;
						}

						.flash {
							border-radius: 0px 4px 4px 0px;
							width: 12px;
							height: 100%;
							display: flex;
							align-items: center;
							background-color: rgb(54, 200, 94);

							img {
								width: 7px;
								height: 12px;
							}

						}
					}

					.e-num-point {
						width: 6px;
					}

				}
			}

			.title-info {
				width: 100%;
				height: 180px;

				.avatar {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 80px;

					img {
						width: 50px;
						height: 50px;
						border-radius: 50px;
					}
				}

				.company {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 50px;
					font-size: 16px;
					color: black;
					font-family: "JinDong", "Microsoft YaHei", sans-serif;
				}

				.amount {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 40px;
					font-weight: bold;
					font-size: 24px;
					font-family: "JinDong", "Microsoft YaHei", sans-serif;
				}
			}

			.pay-devide {
				margin-top: 30px;
				width: 92%;
				height: 1px;
				border-bottom: 1px gainsboro solid;
			}

			.pay-info {
				font-size: 13px;
				width: 100%;
				height: 280px;
				padding-top: 26px;
				padding-left: 30px;

				.row-info {
					width: 100%;
					display: flex;
					min-height: 30px;
					height: auto;
					margin-bottom: 2px;

					.row-label {
						color: gray;
						width: 80px;
					}

					.row-text {
						width: 200px;
						color: black;
						font-family: "Microsoft YaHei";
						word-wrap: break-word;
					}
				}

			}

			.bottom-gray {
				margin-top: 20px;
				width: 100%;
				height: 12px;
				background-color: rgb(246, 246, 247);
			}

			.bottom-info {
				width: 100%;
				height: 180px;
				display: flex;
				flex-direction: column;
				align-items: center;

				.bottom-title {
					display: flex;
					align-items: center;
					padding-left: 30px;
					width: 100%;
					height: 50px;
					font-family: "Microsoft YaHei";
				}

				.bottom-devide {
					width: 92%;
					height: 1px;
					border-bottom: 1px gainsboro solid;
				}

				.bottom-recommend {
					padding-top: 20px;
					padding-left: 26px;
					width: 100%;
					height: 60px;
					display: flex;
					flex-wrap: wrap;

					.recommend-item {
						display: flex;
						width: 160px;
						height: 20px;
						font-size: 10px;
						color: rgb(86, 106, 149);

						.recommend-icon {
							width: 26px;
							height: 20px;
							display: flex;
							align-items: center;

							img {
								width: 16px;
								height: 16px;
							}
						}

						.recommend-text {
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}

	}
</style>